import React, { useState } from 'react'
import { NavBar, Image, Grid, Button } from 'antd-mobile'
import { LeftOutline, StarOutline, StarFill, LocationOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import '../styles/hospitalDetail.scss'

// 科室接口
interface Department {
  id: string;
  name: string;
  icon: string;
  color: string;
}

const HospitalDetailPage: React.FC = () => {
  const navigate = useNavigate()
  const [isFavorite, setIsFavorite] = useState(false)

  // 科室列表数据
  const departments: Department[] = [
    { id: '1', name: '心内科', icon: '❤️', color: '#e6f7ff' },
    { id: '2', name: '呼吸科', icon: '🫁', color: '#f6ffed' },
    { id: '3', name: '神经科', icon: '🧠', color: '#fff7e6' },
    { id: '4', name: '骨科', icon: '🦴', color: '#fff1f0' },
    { id: '5', name: '眼科', icon: '👁️', color: '#e6f7ff' },
    { id: '6', name: '口腔科', icon: '🦷', color: '#f9f0ff' },
    { id: '7', name: '儿科', icon: '👶', color: '#fff7e6' },
    { id: '8', name: '更多', icon: '•••', color: '#f5f5f5' },
  ];

  const toggleFavorite = () => {
    setIsFavorite(!isFavorite)
  }

  const handleBack = () => {
    navigate('/hospital-list')
  }

  const handleAppointment = () => {
    // 处理预约逻辑
    console.log('预约');
  }

  const handleCall = () => {
    // 拨打电话
    console.log('拨打电话');
  };

  const handleNavigate = () => {
    // 导航
    console.log('导航');
  };

  const handleShare = () => {
    // 分享
    console.log('分享');
  };

  const handleConsult = () => {
    // 咨询
    console.log('咨询');
  };
  
  const handleDepartmentClick = (departmentName: string) => {
    navigate(`/doctors/${encodeURIComponent(departmentName)}`)
  }

  return (
    <div className="hospital-detail-page">
      {/* 顶部导航栏 */}
      <NavBar
        className='nav-bar'
        backArrow={<LeftOutline />}
        onBack={handleBack}
        right={
          <div className="favorite-icon" onClick={toggleFavorite}>
            {isFavorite ? <StarFill color="#ffc53d" /> : <StarOutline />}
          </div>
        }
      >协和医院</NavBar>

      {/* 医院信息卡片 */}
      <div className="hospital-info-card">
        <div className="hospital-header">
          <div className="hospital-logo">
            <Image
              src="https://via.placeholder.com/80"
              width={80}
              height={80}
              fit="cover"
              placeholder=""
              alt="协和医院"
            />
          </div>
          <div className="hospital-info">
            <h1 className="hospital-name">协和医院</h1>
            <div className="hospital-level">三甲 | 综合医院</div>
            <div className="hospital-tags">
              <span className="tag score-tag">医院总评分 9.5</span>
              <span className="tag booking-tag">可线上挂号</span>
            </div>
            <div className="hospital-address">
              <LocationOutline /> 北京市东城区帅府园1号
            </div>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="action-buttons">
          <div className="action-item" onClick={handleCall}>
            <div className="action-icon call-icon">📞</div>
            <div className="action-text">联系电话</div>
          </div>
          <div className="action-item" onClick={handleNavigate}>
            <div className="action-icon navigate-icon">🧭</div>
            <div className="action-text">导航</div>
          </div>
          <div className="action-item" onClick={handleShare}>
            <div className="action-icon share-icon">🔄</div>
            <div className="action-text">分享</div>
          </div>
        </div>
      </div>

      {/* 科室导航 */}
      <div className="department-section">
        <div className="section-title">科室导航</div>
        <div className="department-grid">
          <Grid columns={4} gap={8}>
            {departments.map(dept => (
              <Grid.Item key={dept.id}>
                <div 
                  className="department-item"
                  style={{ backgroundColor: dept.color }}
                  onClick={() => handleDepartmentClick(dept.name)}
                >
                  <div className="department-icon">{dept.icon}</div>
                  <div className="department-name">{dept.name}</div>
                </div>
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>

      {/* 底部操作区 */}
      <div className="bottom-action-bar">
        <div className="consult-button" onClick={handleConsult}>
          <span className="consult-icon">💬</span>
          <span>咨询</span>
        </div>
        <Button block color="primary" className='appointment-button' onClick={handleAppointment}>立即预约</Button>
      </div>

      {/* 页面标题提示 */}
      <div className="page-footer">医院详情页</div>
    </div>
  )
}

export default HospitalDetailPage